<!DOCTYPE html>

<html lang="en">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="css/base.css" />
		<!-- Link Swiper's CSS -->
		<link rel="stylesheet" href="css/swiper-4.1.0.min.css">
		<script src="js/jquery-1.12.4.js"></script>

		<!-- Demo styles -->
		<style>
		
			html,
			body,.swiper-container{
				/*width: 100%;
				height: 100%;*/
				overflow: hidden;
				position: relative;				
			}	    
			
			.swiper-wrapper>div:nth-of-type(1){
				background: url(img/yd1.jpg) no-repeat center center;			
				background-size: contain;				
			}
			
			.swiper-wrapper>div:nth-of-type(2){
				background: url(img/yd2.jpg) no-repeat center center;			
				background-size: contain;
			}
			
			.swiper-wrapper>div:nth-of-type(3){
				background: url(img/yd3.jpg) no-repeat center center;			
				background-size: contain;
				position: relative;
			}
			
			#dw{				
				position: absolute;
				bottom: 50px;			
				
			}
			
			#read_btn{
				width: 120px;
				height: 50px;
				border-radius: 10px;
				background: linear-gradient(to top, #36BD7B, #47CE69);
				position: absolute;
				left: -60px;
				bottom: 90px;
				margin-left: 50%;
				text-align: center;
				line-height: 50px;
				color: white;
				/*margin-bottom: 50%;*/
				
			}
			
			.sp_pic{				
	    		background:url(img/sp.jpg) no-repeat center center;
	    		background-size:100%;	    		
	    	}
			
		</style>
	</head>

	<body>
		<div class="sp_pic"></div>
		<!-- Swiper -->
		<div class="swiper-container swiper-container-horizontal swiper-container-wp8-horizontal">
			<div class="swiper-wrapper">				
				<div class="swiper-slide"></div>
				<div class="swiper-slide"></div>
				<div class="swiper-slide"><span id="read_btn">开启阅读</span></div>		
			</div>
	
			<div id="dw" class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
				<span class="swiper-pagination-bullet"></span>
				<span class="swiper-pagination-bullet"></span>
				<span class="swiper-pagination-bullet"></span>				
			</div>		
			
			
		</div>


		<script src="js/swiper-4.1.0.min.js"></script>

		
		<script>
		    $(start);
			function start () {
				var w=document.documentElement.clientWidth;
			  var h=document.documentElement.clientHeight; 
			    $("body").css("width",w+"px").css("height",h+"px");
			    $(".sp_pic").css("width",w+"px").css("height",h+"px");
			   $(".swiper-wrapper>div").css("width",w+"px").css("height",h+"px");
			    $(".swiper-wrapper").css("width",(w*3)+"px");  
			    setTimeout(function() {
			    	$(".sp_pic").fadeOut(300);			    	
			    },3000);
			   
			   
			   $("#read_btn").click(function() {
			   	location.href="index.html";
			   })
			}
		    
		
			var swiper = new Swiper('.swiper-container', {
				spaceBetween: 30,
				centeredSlides: true,
				/*autoplay: {
					delay: 2500,
					disableOnInteraction: false,
				},*/
				pagination: {
					el: '.swiper-pagination',
					clickable: true,
				},
				/*navigation: {
					nextEl: '.swiper-button-next',
					prevEl: '.swiper-button-prev',
				},*/
				
				
				
			});
		</script>		
	</body>

</html>